<template>
  <div id="app">
    <!-- -->
    <van-nav-bar title="萌宠百科">
      <template #right>
        <van-icon name="search" size="20" @click="search" />
      </template>
    </van-nav-bar>
    <div class="search">
      <van-popup v-model="show" round position="bottom" :style="{ height: '78%' }">
        <van-search v-model="value" background="#ace0f9" placeholder="请输入搜索关键词" />
        <div class="box1">
          <van-button color="#a18cd1" round :style="{ marginTop: '1vw' }" @click="searchButton">
            搜索
          </van-button>
        </div>
        <div class="box2">
          <!-- 宠物显示区 -->
          <template v-if="filteredData.length > 0">
            <van-card v-for="item in filteredData" :key="item.id" @click="toinfo(item.id)" :desc="item.desc"
              :title="item.name" :thumb="item.coverURL">
            </van-card>
          </template>
          <template v-else>
            <van-empty class="custom-image" image="https://imgs.qiubiaoqing.com/qiubiaoqing/imgs/62d45cdc270fbOUI.gif"
              description="您还没有搜索的萌宠，快去搜索试试吧！" />
          </template>
          <!-- <slot>
            <van-card v-for="item in SrData" :key="item.id" @click="toinfo(item.id)" :desc="item.desc"
              :title="item.name" :thumb="item.coverURL">
            </van-card>
          </slot> -->
        </div>
      </van-popup>
    </div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="banner">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!--  -->
    <van-grid :column-num="5">
      <van-grid-item v-for="item in category" :key="item.title" @click="jump(item.id)">
        <van-image :src="item.icon" class="icon" />
        <p>{{ item.title }}</p>
      </van-grid-item>
    </van-grid>
    <!--  -->
    <van-notice-bar left-icon="like-o" :scrollable="false">
      <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item>宠物是抚慰心灵的好伴侣。</van-swipe-item>
        <van-swipe-item>养宠物，培养责任感。</van-swipe-item>
        <van-swipe-item>宠物能治愈心灵创伤。</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <!--  -->
    <h3 class="box">热门萌宠</h3>
    <!--  -->
    <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img class="pop" src="@/assets/img/popbi.png" :style="{ transform: `scale(${props.distance / 80})` }" />
      </template>
      <!-- 释放提示 -->
      <template #loosing>
        <img class="pop" src="@/assets/img/popbi.png" />
      </template>
      <!-- 加载提示 -->
      <template #loading>
        <img class="pop" src="@/assets/img/popzhang.png" />
      </template>
      <slot>
        <van-card v-for="item in jxData" :key="item.id" @click="toinfo(item.id)" :desc="item.desc" :title="item.name"
          :thumb="item.coverURL">
        </van-card>
      </slot>
    </van-pull-refresh>
  </div>
</template>

<script>
import localforage from 'localforage';
import { Toast } from 'vant';
export default {
  name: 'Vue2Index',

  data() {
    return {
      count: 0,
      show: false,
      isLoading: false,
      value: '',
      images: [
        require("@/assets/img/daquan.jpg"),
        require("@/assets/img/tupian2.jpg"),
        require("@/assets/img/tupian1.jpg"),
        require("@/assets/img/tupian3.jpg"),
      ],
      category: [],
      jxData: [],
      filteredData: [],
    };
  },

  mounted() {
    this.getspdata();
    this.getCategoryData();

  },

  methods: {
    search() {
      this.show = true;
    },
    jump(pettype) {
      //页面跳转并携带id参数
      this.$router.push("/category?pettype=" + pettype);
    },
    toinfo(goodid) {
      //页面跳转并携带id参数
      this.$router.push("/goodinfo?goodid=" + goodid);
    },
    // getspdata() {
    //   //使用axios请求数据文件,并对data中的数据进行赋值
    //   this.$axios({
    //     url: "./localdata/petlist.json",
    //   }).then((res) => {
    //     this.jxData = res.data.filter((item) => {
    //       return item.hot == true;
    //     });
    //   });
    // },
    getspdata() {
      // 使用axios请求数据文件,并对data中的数据进行赋值
      this.$axios({
        url: "./localdata/petlist.json",
      }).then((res) => {
        this.jxData = res.data.filter((item) => {
          if (this.count % 2 === 0) {
            return item.hot;
          } else {
            return !item.hot;
          }
        });
      });
    },

    getCategoryData() {
      //使用axios请求数据文件,并对data中的数据进行赋值
      this.$axios({
        url: "./localdata/type.json",
      }).then((res) => {
        this.category = res.data;
      });
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
        this.getspdata();
      }, 1000);

    },
    // 在 searchButton 方法中添加对 filteredData 是否为空的判断
    searchButton() {
      if (this.value.trim() === '') {
        this.$toast('您还未输入搜索萌宠关键词！');

        return;
      }
      this.$axios({
        url: "./localdata/petlist.json",
      }).then((res) => {
        this.filteredData = res.data.filter((item) => {
          return item.name.includes(this.value); // 使用includes方法进行模糊查询
        });

        if (this.filteredData.length === 0) {
          // 使用 vant 的 Toast 组件来提示用户未搜索到相关内容
          this.$toast('未搜索到相关萌宠');
        }
      })
        .catch((error) => {
          console.error('Error fetching and filtering data', error);
        });
    },


  },
};
</script>
<style scoped>
.van-nav-bar.van-hairline--bottom {
  background-image: linear-gradient(278deg, #fff1eb 0%, #ace0f9 100%);
}

.banner {
  height: 34vw;
  margin: 2vw;
  border-radius: 4vw;
}

.banner img {
  width: 100%;
  height: 100%;
}

.van-image {
  height: 8vw;
}

:deep(.van-image) img {
  border-radius: 2vw;
}

.van-card__content {
  display: flex;
  justify-content: space-around;
}

.van-card__title.van-multi-ellipsis--l2 {
  max-height: none;
  font-size: 5vw;
  line-height: 1;
}

.van-card__desc.van-ellipsis {
  font-size: 4vw;
  line-height: 2;
  max-height: none;
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}

.van-notice-bar {
  height: 10vw;
}

:deep(.van-notice-bar__wrap) div {
  font-size: 4vw;
}

.pop {
  width: 40vw;
  height: 30vw;
  margin-top: -5vw;
  border-radius: 2vw;
}

.van-card__thumb {
  width: 22vw;
  height: 100%;
}

.box::before {
  content: "";
  /* display: inline-block; */
  width: 1vw;
  height: 100%;
  background: #a18cd1;
  position: absolute;
  top: 0px;
  left: 0px;
}

.box {
  height: 8vw;
  font-size: 6vw;
  position: relative;
  color: #800020;
  padding-left: 2vw;
}

.box1 {
  display: flex;
  justify-content: space-evenly;
}
</style>